<template>
  <view class="template-login">
    <!-- 顶部自定义导航 -->
    <!-- <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar> -->
    
    <view class="login">
      <!-- 顶部背景图片-->
      <!-- <view class="login__bg login__bg--top">
        <image class="bg" src="../../static/login_top2.jpg" mode="widthFix"></image>
      </view>
      <view class="login__bg login__bg--top">
        <image class="rocket rocket-sussuspension" src="../../static/login_top3.png" mode="widthFix"></image>
      </view> -->
	  <view class="login__bg img_tlltt">
	    <image class="bg" src="../../static/tlltt.png" mode="widthFix" ></image>
	  </view>
	  <view class="login__bg text_ypt">
	    <text>家园共育·教育云平台</text>
	  </view>
	  <view class="login__bg img_group">
	    <image class="bg" src="../../static/login_group.png" mode="widthFix"></image>
	  </view>
	  
	  
      <view class="login__wrapper" v-if="loginStatus == 1">
		  
		  <!-- <view class="login__mode tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-center">
		    <view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': portIndex === 1}]" @tap.stop="modeSwitch(1)">
		      园所端
		    </view>
		    <view class="login__mode__item tn-flex-1" :class="[{'login__mode__item--active': portIndex === 2}]" @tap.stop="modeSwitch(2)">
		      家长端
		    </view>
		    <view class="login__mode__slider tn-cool-bg-color-15--reverse" :style="[modeSliderStyle]"></view>
		  </view> -->
        <!-- 输入框内容-->
        <view class="login__info tn-flex tn-flex-direction-column tn-flex-col-center tn-flex-row-center">
          <!-- 登录 -->
          <block v-if="currentModeIndex === 0">
            <view class="login__info__item">
            	<view class="login__info__item__label">请输入登录手机号码</view>
            	<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
            	  <!-- <view class="login__info__item__input__left-icon">
            		<view class="tn-icon-phone"></view>
            	  </view> -->
            	  
            	  <view class="login__info__item__input__content">
            		<input maxlength="20" placeholder-class="input-placeholder" v-model="loginPhone" placeholder="请输入登录手机号码" />
            	  </view>
            	</view>
            </view>
            
            <view class="login__info__item">
            	<view class="login__info__item__label">请输入登录密码</view>
            	<view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
            	  <!-- <view class="login__info__item__input__left-icon">
            		<view class="tn-icon-lock"></view>
            	  </view> -->
            	  
            	  <view class="login__info__item__input__content">
            		<input :password="!showPassword" placeholder-class="input-placeholder" v-model="loginPassword" placeholder="请输入登录密码" />
            	  </view>
            	  <view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
            		<view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
            	  </view>
            	</view>
            </view>
          </block>
          <!-- 注册 -->
          <block v-if="currentModeIndex === 1">
            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
              <view class="login__info__item__input__left-icon">
                <view class="tn-icon-phone"></view>
              </view>
              <view class="login__info__item__input__content">
                <input maxlength="20" placeholder-class="input-placeholder" placeholder="请输入注册手机号码" />
              </view>
            </view>
            
            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
              <view class="login__info__item__input__left-icon">
                <view class="tn-icon-code"></view>
              </view>
              <view class="login__info__item__input__content login__info__item__input__content--verify-code">
                <input placeholder-class="input-placeholder" placeholder="请输入验证码" />
              </view>
              <view class="login__info__item__input__right-verify-code" @tap.stop="getCode">
                <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" size="sm" padding="5rpx 10rpx" width="100%" shape="round">{{ tips }}</tn-button>
              </view>
            </view>
            
            <view class="login__info__item__input tn-flex tn-flex-direction-row tn-flex-nowrap tn-flex-col-center tn-flex-row-left">
              <view class="login__info__item__input__left-icon">
                <view class="tn-icon-lock"></view>
              </view>
              <view class="login__info__item__input__content">
                <input :password="!showPassword" placeholder-class="input-placeholder" placeholder="请输入登录密码" />
              </view>
              <view class="login__info__item__input__right-icon" @click="showPassword = !showPassword">
                <view :class="[showPassword ? 'tn-icon-eye' : 'tn-icon-eye-hide']"></view>
              </view>
            </view>
          </block>
          
		  <view class="login__info__setting">
		  	<tn-checkbox class="login__info__item__checkbox fl" v-model="checked" :iconSize="28" :labelSize="30" activeColor="#79CF67" @change="checkChange" shape="square">
				<span class="login__info__item__checkboxspan">记住密码</span>
			</tn-checkbox>
			<tn-checkbox class="login__info__item__checkbox fr" v-model="isteacher" :iconSize="28" :labelSize="30" activeColor="#79CF67" @change="itChange" shape="square">
				<span class="login__info__item__checkboxspan">我是老师</span>
			</tn-checkbox>
			<!-- <view v-if="currentModeIndex === 0" class="login__info__item__tips fr" @click="goChangepwdPage">忘记密码?</view> -->
		  </view>
		  
		  <view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover" :hover-stay-time="150" @click="goindexPage">登录</view>
		  <view v-if="currentModeIndex === 0" class="login__info__item__tips" >忘记密码？<text class="login__info__item__link" @click="goChangepwdPage">点击这里</text></view>
		  
          <!-- <view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover" :hover-stay-time="150" @click="goindexPage">登录 <tn-loading :show="btnloading" color="#AAAAAA"></tn-loading></view> -->
          
		  <!-- <view class="login__info__setting">
		  	<tn-checkbox class="login__info__item__checkbox fl" v-model="checked" :iconSize="14" :labelSize="28" @change="checkChange" shape="circle">
				<span class="login__info__item__checkboxspan">记住密码</span>
			</tn-checkbox>
	
			<tn-checkbox class="login__info__item__checkbox fl" v-model="isteacher" @change="itChange" :iconSize="14" :labelSize="28" shape="circle">
				<span class="login__info__item__checkboxspan">我是老师</span>
			</tn-checkbox>		
			<view v-if="currentModeIndex === 0" class="login__info__item__tips fr" @click="goChangepwdPage">忘记密码?</view>
		  </view> -->
        </view>
        
        <!-- 其他登录方式 -->
        <!-- <view class="login__way tn-flex tn-flex-col-center tn-flex-row-center">
          <view class="tn-padding-sm tn-margin-xs">
            <view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-green tn-color-white">
              <view class="tn-icon-wechat-fill"></view>
            </view>
          </view>
          <view class="tn-padding-sm tn-margin-xs">
            <view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-red tn-color-white">
              <view class="tn-icon-sina"></view>
            </view>
          </view>
          <view class="tn-padding-sm tn-margin-xs">
            <view class="login__way__item--icon tn-flex tn-flex-row-center tn-flex-col-center tn-shadow-blur tn-bg-blue tn-color-white">
              <view class="tn-icon-qq"></view>
            </view>
          </view>
        </view> -->
      </view>
      
      
      <view class="choose-view tn-padding"  v-if="loginStatus == 2">
			<view class="choose-name-view tn-margin-bottom">
				{{currentChooseItem.orgId?currentChooseItem.orgName:'请选择'}}
			</view>
      	  <tn-radio-group v-if="portIndex==1" wrap v-model="chooseItem" @change="chooseChange">
      	    <tn-radio v-for="item in confirmList" :key="item.orgId" :name="item.orgId">{{item.orgName}}</tn-radio>
      	  </tn-radio-group>
      	  <tn-radio-group v-if="portIndex==2" wrap v-model="chooseItem" @change="chooseChange">
      	    <tn-radio v-for="item in confirmList" :key="item.childId" :name="item.childId">{{item.orgName}}--{{item.childName}}</tn-radio>
      	  </tn-radio-group>
		  
		  <view class="login__info__item__button tn-cool-bg-color-7--reverse" hover-class="tn-hover" :hover-stay-time="150" @click="nextStep">下一步</view>
		  <view class="tn-text-right" @click="goback">
		  	返回
		  </view>
		  
      </view>
      <!-- 底部背景图片-->
      <view class="login__bg login__bg--bottom">
        <image src="https://tnuiimage.tnkjapp.com/login/1/login_bottom_bg.jpg" mode="widthFix"></image>
      </view>
    </view>
    
    <!-- 验证码倒计时 -->
    <tn-verification-code
      ref="code"
      uniqueKey="login-demo-1"
      :seconds="60"
      @change="codeChange">
    </tn-verification-code>
		<tn-toast
		  ref="toast"
		></tn-toast>
  </view>
</template>

<script>
	import md5 from '@/util/md5.js'
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    name: 'login-demo-1',
    mixins: [template_page_mixin],
    data() {
      return {
        // 当前选中的模式
        currentModeIndex: 0,
        // 模式选中滑块
        modeSliderStyle: {
          left: 0
        },
        // 是否显示密码
        showPassword: false,
        // 倒计时提示文字
        tips: '获取验证码',
		checked: false,
		portIndex: 2,
		loginPassword: '',
		loginPhone: '',
		loginStatus: 1,
		confirmList: [],
		chooseItem: '',
		currentChooseItem: {},
		isteacher: false,
		btnloading: false
      }
    },
    watch: {
      currentModeIndex(value) {
        const sliderWidth = uni.upx2px(476 / 2)
        this.modeSliderStyle.left = `${sliderWidth * value}px`
      },
	  portIndex(value) {
		  let _val = value - 1;
        const sliderWidth = uni.upx2px(476 / 2)
        this.modeSliderStyle.left = `${sliderWidth * _val}px`
      },
    },
	onLoad() {
		uni.removeStorageSync('token');
		let logincheck = uni.getStorageSync('logincheck')
		if(logincheck && logincheck.value){
			let loginparam = uni.getStorageSync('loginparam')
			console.log(loginparam)
			if(loginparam){
				this.loginPhone = loginparam.phone
				this.loginPassword = loginparam.password
				this.portIndex = loginparam.loginType
			}
			if(this.portIndex == 1){
				this.isteacher = true
			}
			this.checked = logincheck.value
		}
	},
    methods: {
      // 切换模式
      modeSwitch(index) {
		  this.portIndex = index;
      },
      // 获取验证码
      getCode() {
        if (this.$refs.code.canGetCode) {
          this.$t.message.loading('正在获取验证码')
          setTimeout(() => {
            this.$t.message.closeLoading()
            this.$t.message.toast('验证码已经发送')
            // 通知组件开始计时
            this.$refs.code.start()
          }, 2000)
        } else {
          this.$t.message.toast(this.$refs.code.secNum + '秒后再重试')
        }
      },
      // 获取验证码倒计时被修改
      codeChange(event) {
        this.tips = event
      },
	  goindexPage(){
		  if(this.btnloading){
			  return
		  }
		  if(!this.loginPhone){
			  this.$refs.toast.show({
			    title: '',
			    content: '请填写手机号',
			    icon: '',
			    image: '',
			    duration: 1000
			  })
			return;
		  }
		  if(!this.loginPassword){
			  this.$refs.toast.show({
			    title: '',
			    content: '请填写密码',
			    icon: '',
			    image: '',
			    duration: 1000
			  })
			  return;
		  }
		  this.btnloading = true
				uni.showLoading({
					title: '登录中'
				});
		  let postData = {
		  			"phone": this.loginPhone,
		  			"password": md5.hex_md5(this.loginPassword),
		  			"loginType": this.portIndex,
		  		}
		  	this.request({
		  		url: '/Account/applogin',
		  		method: 'post',
		  		params: postData,
		  	}).then(res => {
					uni.hideLoading();
		  		if(res.code == 200){
					if(!res.data.isMultiple){
						uni.setStorageSync('loginparam', {
							"phone": this.loginPhone,
							"password": this.loginPassword,
							"loginType": this.portIndex,
						});
						uni.setStorageSync('token', res.data.token);
						uni.setStorageSync('loginType', this.portIndex)
						res.data.userInfo.phone = this.loginPhone;
						uni.setStorageSync('userInfo', res.data.userInfo)
						uni.reLaunch({url: '/pages/index/index'})
					}else{
						this.loginStatus = 2;
						this.confirmList = res.data.confirmList;
					}
		  		}else{
					
								  this.$refs.toast.show({
								    title: '',
								    content: res.message,
								    icon: '',
								    image: '',
								    duration: 1000
								  })
				}
				
				this.btnloading = false
		  	}).catch(err => {
				
					uni.hideLoading();
				this.btnloading = false
			})
	  },
	  goback(){
		  this.loginStatus = 1;
		  this.confirmList = [];
		  this.currentChooseItem = {};
		  this.chooseItem = '';
	  },
	  itChange(val){
		  console.log('---------',val)
		  if(val.value){
			  this.portIndex = 1
		  }else{
			  this.portIndex = 2
		  }
	  },
	  nextStep(){
		  let str = this.portIndex == 1?'幼儿园':'幼儿';
		  if(!this.chooseItem){
			  this.$refs.toast.show({
			    title: '',
			    content: '请选择'+str,
			    icon: '',
			    image: '',
			    duration: 1000
			  })
			  return;
		  }
		  
		  	this.request({
		  		url: '/Account/applogin',
		  		method: 'post',
		  		params: {
		  			"phone": this.loginPhone,
		  			"password": md5.hex_md5(this.loginPassword),
		  			"loginType": this.portIndex,
					"confirmData": this.currentChooseItem
		  		},
		  	}).then(res => {
		  		if(res.code == 200){
					uni.setStorageSync('token', res.data.token);
					uni.setStorageSync('loginType', this.portIndex)
						res.data.userInfo.phone = this.loginPhone;
						uni.setStorageSync('userInfo', res.data.userInfo)
					uni.reLaunch({url: '/pages/index/index'})
		  		}else{
					
								  this.$refs.toast.show({
								    title: '',
								    content: res.message,
								    icon: '',
								    image: '',
								    duration: 1000
								  })
				}
		  	})
	  },
	  goChangepwdPage(){
		uni.navigateTo({url: '/pages/login/changePwd'})
		  
	  },
	  chooseChange(e){
		  if(this.portIndex == 1){
			  let item = this.confirmList.find(ele => {return ele.orgId == e});
			  this.currentChooseItem = item;
		  }else{
			let item = this.confirmList.find(ele => {return ele.childId == e});
			this.currentChooseItem = item;
		  }
	  },
	  checkChange(val){
		  console.log(val)
		  console.log(this.checked)
		  uni.setStorageSync('logincheck', val)
	  }
    }
  }
</script>

<style lang="scss" scoped>
  @import '@/static/css/templatePage/custom_nav_bar.scss';
  /* 悬浮 */
  .rocket-sussuspension{
    animation: suspension 3s ease-in-out infinite;
  }
  
  @keyframes suspension {
    0%, 100% {
      transform: translate(0 , 0);
    }
    50% {
      transform: translate(-0.8rem , 1rem);
    }
  }
  
  .template-login{
	  height: 100vh;
	  background-color: #D3F3E7;
  }
  
  .login {
    position: relative;
    height: 100%;
    z-index: 1;
	
	.img_tlltt{
		width: 374rpx;
		height: 84rpx;
		position: absolute;
		top:44rpx;
		left:88rpx;
		
		image{
			width: 100%
		}
	}
	.text_ypt{
		text-shadow:
		    -1px -1px 0 #fff,  
		     1px -1px 0 #fff,
		    -1px 1px 0 #fff,
		     1px 1px 0 #fff; /* 文字描边色 */
		font-size: 36rpx;
		color: #189511;
		line-height: 48rpx;
		font-weight: bold;
		position: absolute;
		top:152rpx;
		left:284rpx;
	}
	.img_group{
		width: 560rpx;
		position: absolute;
		left: 95.6rpx;
		top:  222rpx;
		
		image{
			width: 100%
		}
	}
    
    /* 背景图片 start */
    &__bg {
      z-index: -1;
      position: fixed;
      
      &--top {
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        
        .bg {
          width: 750rpx;
          will-change: transform;
        }
        .rocket {
          margin: 50rpx 28%;
          width: 400rpx;
          will-change: transform;
        }
      }
      
      &--bottom {
        bottom: -10rpx;
        left: 0;
        right: 0;
        width: 100%;
        // height: 144px;
        margin-bottom: env(safe-area-inset-bottom);
        
        image {
          width: 750rpx;
          will-change: transform;
        }
      }
    }
    /* 背景图片 end */
    
    /* 内容 start */
    &__wrapper {
      width: 100%;
      padding-bottom: 50rpx;
      // height: 870rpx;
      position: absolute;
      bottom: 0;
      background-color: #FFFFFF;
      border-radius: 60rpx 60rpx 0rpx 0rpx;
    }
    
    /* 切换 start */
    &__mode {
      position: relative;
      margin: 0 auto;
      width: 476rpx;
      height: 77rpx;
      background-color: #FFFFFF;
      box-shadow: 0rpx 10rpx 50rpx 0rpx rgba(0, 3, 72, 0.1);
      border-radius: 39rpx;
      
      &__item {
        height: 77rpx;
        width: 100%;
        line-height: 77rpx;
        text-align: center;
        font-size: 31rpx;
        color: #908f8f;
        letter-spacing: 1em;
        text-indent: 1em;
        z-index: 2;
        transition: all 0.4s;
        
        &--active {
          font-weight: bold;
          color: #FFFFFF;
        }
      }
      
      &__slider {
        position: absolute;
        height: inherit;
        width: calc(476rpx / 2);
        border-radius: inherit;
        box-shadow: 0rpx 18rpx 72rpx 18rpx rgba(0, 195, 255, 0.1);
        z-index: 1;
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      }
    }
    /* 切换 end */
    
    /* 登录注册信息 start */
    &__info {
      padding: 30rpx 51rpx;
      padding-bottom: 0;
	  &__setting{
		  width: 100%;
		  overflow: hidden;
	  }
      
      &__item {
		margin-top: 50rpx;
		width:100%;
		
		&__label{
			font-size: 30rpx;
			line-height: 48rpx;
			margin-bottom: 10rpx;
			color: rgba(0,0,0,0.90);
		}
	  
		&__link{
			color: #02C76F;
		}
        
        &__input {
          // margin-top: 59rpx;
          width: 100%;
          height: 88rpx;
          border-radius: 8rpx;
          background: #f6f6f6;
          
          &__left-icon {
            width: 10%;
            font-size: 44rpx;
            margin-left: 20rpx;
            color: #AAAAAA;
          }
          
          &__content {
            width: 100%;
            padding-left: 40rpx;
            
            &--verify-code {
              width: 56%;
            }
            
            input {
              font-size: 24rpx;
              // letter-spacing: 0.1em;
            }
          }
          
          &__right-icon {
            width: 10%;
            font-size: 44rpx;
            margin-right: 20rpx;
            color: #AAAAAA;
          }
          
          &__right-verify-code {
            width: 34%;
            margin-right: 20rpx;
          }
        }
        
        &__button {
          width: 100%;
          height: 88rpx;
          line-height: 88rpx;
          margin-top: 48rpx;
          font-size: 32rpx;
          text-align: center;
          background: #79cf67;
          border-radius: 8rpx;
        }
        
        &__tips {
          margin: 30rpx 0;
          color: #AAAAAA;
        }
		&__checkbox{
          margin: 30rpx 0;
		}
		&__checkboxspan{
          color: #AAAAAA;
			
		}
      }
    }
    /* 登录注册信息 end */
    
    /* 登录方式切换 start */
    &__way {
      margin: 0 auto;
      margin-top: 110rpx;
      
      &__item {
        &--icon {
          width: 77rpx;
          height: 77rpx;
          font-size: 50rpx;
          border-radius: 100rpx;
          margin-bottom: 18rpx;
          position: relative;
          z-index: 1;
          
          &::after {
            content: " ";
            position: absolute;
            z-index: -1;
            width: 100%;
            height: 100%;
            left: 0;
            bottom: 0;
            border-radius: inherit;
            opacity: 1;
            transform: scale(1, 1);
            background-size: 100% 100%;
            background-image: url(https://tnuiimage.tnkjapp.com/cool_bg_image/icon_bg5.png);
          }
        }
      }
    }
    /* 登录方式切换 end */
    /* 内容 end */
    
  }
  
  /deep/.input-placeholder {
    font-size: 24rpx;
    color: #E6E6E6;
  }
  .fl{
	  float: left;
  }
  .fr{
	  float: right;
  }
  .choose-view{
	  text-align: center;
      width: 100%;
	  position: absolute;
	  top: 500rpx;
  }
  .choose-name-view{
	  font-size: 36rpx;
	  font-weight: bold;
  }
</style>
